import { EllipsisOutlined, ExclamationCircleOutlined, PlusOutlined } from '@ant-design/icons';
import type { ActionType, ProColumns } from '@ant-design/pro-components';
import { PageContainer, ProTable, TableDropdown } from '@ant-design/pro-components';
import { Avatar, Button, Col, DatePicker, Dropdown, message, Modal, Row, Space, Tabs, Tag } from 'antd';
import { useEffect, useRef, useState } from 'react';
import request from 'umi-request';
import AddInterview from './AddInterview';
import DetailsInterview from './DetailInterview';
import { deleteInterview, getStatisticsRecord, pageInterview } from '@/services/api/api-interview-record';
import { useAccess } from 'umi';
import { parse } from '@/utils/historyUtils';
import ProList from '@ant-design/pro-list';

interface TabableInterviewProps {
    type: number
    reload: boolean
}

const TableInterview: React.FC<TabableInterviewProps> = ({ type, reload }) => {
    const actionRef = useRef<ActionType>();
    const access = useAccess();
    const [interviewId, setInterviewId] = useState<string>()
    const [totalData, setTotalData] = useState<InterviewRecordData.Statistics>({
        countUnclaimed: 0,
        countClaimed: 0
    })

    const getTotal = async () => {
        const res = await getStatisticsRecord({ type })
        console.log(res);
        if (res.code === 0) {
            setTotalData(res.data)
        }
    }
    useEffect(() => {
        getTotal()
        actionRef.current?.reload()
    }, [type,reload])

    useEffect(() => {
        const { interviewId } = parse(location.search) as { interviewId: string };
        console.log(interviewId);
        setInterviewId(interviewId);
    }, [])



    useEffect(() => {
        const { interviewId } = parse(location.search) as { interviewId: string };
        console.log(interviewId);
        setInterviewId(interviewId);
    }, [])


    const handleReload = () => {
        getTotal()
        actionRef.current?.reload();
    }
    return (
        <PageContainer
            header={{
                title: false,
                breadcrumb: {
                },
                style: {
                    paddingBlockEnd: 0,
                },
            }}
            // tabProps={{
            //     style: {
            //         margin: 0,
            //     },
            //     tabBarGutter: 30,
            // }}
            // tabBarExtraContent={{
            //     right: (
            //         <>
            //             {(access.采访要素匹配x管理员 || access.采访要素匹配x采访媒体) && <AddInterview onRefurbish={handleReload} />}
            //         </>
            //     ),
            //     left: (
            //         <span
            //             style={{
            //                 marginInlineEnd: '12px',
            //                 color: 'rgba(0, 0, 0, 0.88)',
            //                 fontWeight: 600,
            //                 fontSize: 20,
            //                 height: 48,
            //                 paddingRight: 35,
            //                 marginBottom: 10,
            //             }}
            //             title="采访要素匹配"
            //         >采访要素匹配</span>
            //     ),
            // }}
        >
            <ProList<InterviewRecordData.PageVo>
                header={false}
                headerTitle={false}
                ghost={true}
                pagination={{
                    defaultPageSize: 8,
                    showSizeChanger: false,
                    style: { textAlign: 'center' },
                }}
                toolBarRender={false}
                className='interviewRender'
                style={{ marginTop: 10 }}
                showActions="hover"
                grid={{ gutter: 18, column: 1 }}
                // columns={columns}
                actionRef={actionRef}
                request={async (params, sort, filter) => {

                    const response = await pageInterview({
                        ...params,
                        type
                    });
                    return Promise.resolve({
                        data: response.data.data,
                        total: response.data.total,
                        success: response.code === 0,
                    });
                }}
                editable={{
                    type: 'multiple',
                }}
                columnsState={{
                    persistenceKey: 'pro-table-singe-demos',
                    persistenceType: 'localStorage',
                    defaultValue: {
                        option: { fixed: 'right', disable: true },
                    },
                    onChange(value) {
                        console.log('value: ', value);
                    },
                }}
                rowKey="id"
                search={false}
                options={{
                    setting: {
                        listsHeight: 400,
                    },
                }}
                dateFormatter="string"
                renderItem={(item: InterviewRecordData.PageVo, index: number) => {
                    return (
                        <DetailsInterview
                            id={item.id}
                            title={String(item.title)}
                            item={item}
                            onRefurbish={handleReload}
                            interviewId={String(interviewId)}
                            triggerMode="card"
                        />
                    );
                }}
            // headerTitle="高级表格"
            // toolBarRender={
            //     () => (access.采访要素匹配x管理员 || access.采访要素匹配x采访媒体) && <AddInterview onRefurbish={handleReload} />
            // }
            />
        </PageContainer>
    );
}
export default TableInterview;